<template>
    <div class="index">
      <div class="grid">
        <button @click="getdata()">换一组</button>
        <div v-for="item in images" :key="item.url" class="grid-item">
          <img :src="item.url" alt="" >
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  const images = ref([]);
  const getdata = async () => {
    images.value = []
    const imgsteam = ref({})
    for (let i = 1; i <= 12; i++) {
      axios.get('/API/wztp/dmst.php', {
        responseType: 'blob' // 必须说明 axios 请求类型
      }).then((res) => {
        console.log(res.data)
        imgsteam.value = {}
        imgsteam.value.url = res.data?.text
        console.log(imgsteam.value)
        images.value.push(imgsteam.value)
      })
    }
  }
  onMounted(() => {
    getdata()
  });
  </script>
  
  <style scoped>
  .index {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }
  
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    width: 80%;
  }
  
  .grid-item {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .grid-item img {
    width: 100%;
    height: auto;
    display: block;
  }
  </style>
  